<template>
  <div>
    <div>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="SKU" v-bind="formItemLayout">
            <a-input style="width: 100%" v-model="maaFile.maa01" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='供应商' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa02" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='供应商型号' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa03" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label='商品分类' v-bind="formItemLayout">
            <a-cascader
              :defaultValue="selectedOptions"
              :fieldNames="{ label: 'text', value: 'id', children: 'children' }"
              :options="options"
              v-model="selectedOptions" @change="onChange" placeholder="请选择商品类别"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='品牌' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa10" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='计量单位' v-bind="formItemLayout">
            <a-select defaultValue="0" style="width: 100%" v-model="maaFile.maa11"  placeholder="请选择商品类别">
              <a-select-option value="0">件</a-select-option>
              <a-select-option value="1">箱</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label='货币代码' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa12" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='产品生产国' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa13" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='产品状态' v-bind="formItemLayout">
            <a-select defaultValue="Y" style="width: 100%" v-model="maaFile.maaacti">
              <a-select-option value="Y">上架</a-select-option>
              <a-select-option value="N">下架</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label='运输类型' v-bind="formItemLayout">
            <a-select defaultValue="0" style="width: 100%" v-model="maaFile.maa30">
              <a-select-option value="0">不可空运</a-select-option>
              <a-select-option value="1">可空运</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='报关英文' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa35" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='报关中文' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa36" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='海关编码' v-bind="formItemLayout">
            <a-input v-model="maaFile.maa37" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label='产品标题'>
        <a-input v-model="maaFile.maa14" style="width: 100%"/>
      </a-form-item>
      <a-form-item label='产品标签'>
        <a-input v-model="maaFile.maa15" style="width: 100%"/>
      </a-form-item>
      <a-form-item label='产品卖点'>
        <a-input v-model="maaFile.maa16" style="width: 100%"/>
      </a-form-item>
    </div>
  </div>
</template>
<script>
import GlobalVariable from '../../../common/global_variable'
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18}
}
export default {
  name: 'News',
  components: {},
  data () {
    return {
      maaFile: this.newsData || {},
      actionUrl: GlobalVariable.preRequest + 'file/uploadQCloud',
      formItemLayout,
      selectedOptions: [],
      options: []
    }
  },
  props: ['newsData', 'selectedOption'],
  watch: {
    'newsData' (val) {
      this.maaFile = val
    },
    'maaFile' (val) {
      this.$emit('update:newsData', val)
    },
    'selectedOption' (val) {
      this.selectedOptions = val
    },
    'selectedOptions' (val) {
      this.$emit('update:selectedOption', val)
    }
  },
  methods: {
    onChange (value, selectedOptions) {
      console.log(selectedOptions)
      this.maaFile.maa04 = value[0]
      this.maaFile.maa05 = value[1]
      this.maaFile.maa06 = value[2]
    }
  },
  created () {
    this.$api.goods.getCategoryList().then((r) => {
      console.log(r)
      this.options = r.data.data.tree.children
      console.log(this.options)
    })
    this.$api.goods.getSKU().then((r) => {
      console.log(r)
      this.maaFile.maa01 = r.data.data
    })
  }
}
</script>

<style lang="less" scoped>

</style>
